<template>
  <div>
    <div class="tab-bar">
      <navigator url="/pages/index/main" class="tab-bar-item">
        <image class="tab-bar-img" src="../../static/images/tabs/home.png" />
        <div class="tab-bar-name">首页</div>
      </navigator>
      <navigator url="/pages/productcenter/main" class="tab-bar-item">
        <image class="tab-bar-img" src="../../static/images/tabs/productcenter.png" />
        <div class="tab-bar-name">产品中心</div>
      </navigator>
      <div class="tab-bar-item" @click="phone">
        <image   class="tab-bar-img" src="../../static/images/tabs/contact.png" />
        <div class="tab-bar-name">联系电话</div>
      </div>
      <div class="tab-bar-item" @click="map" >
        <div>
          <image class="tab-bar-img" src="../../static/images/tabs/map.png" />
        </div>
        <div class="tab-bar-name">联系地址</div>
      </div>
    </div>
    <!--占位用的和tabbar高度一致-->
    <div class="tab-bar-placeholder"> </div>
  </div>
</template>

<script>
  export default {

    methods:{
      phone(){
        wx.makePhoneCall({
          phoneNumber: '1340000' //仅为示例，并非真实的电话号码
        });
      },
      map(){
        console.log('abc');
        wx.openLocation({
          latitude: 23.362490,
          longitude: 116.715790,
          scale: 18,
          name: '华乾大厦',
          address:'金平区长平路93号'
        })
      }
    }
  }
</script>

<style scoped>
  .tab-bar-placeholder{
    width: 750rpx;
    height: 100rpx;

  }
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 100rpx;
    border-top: 1rpx solid #ccc;
    background: #fff;
    z-index: 999;
    display: flex;
    flex-direction: row;
  }
  .tab-bar .tab-bar-item{
    padding-top: 16rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tab-bar .tab-bar-item .tab-bar-img{
    display: block;
    width: 45rpx;
    height: 45rpx;
  }
   .tab-bar .tab-bar-item .tab-bar-name{
     padding-top: 10rpx;
     font-size: 20rpx;
     text-align: center;
  }

</style>
